<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .left,.right,.middle{ float: left;}
        .left,.right{ border: 1px solid #eee; width: 100px; height: 200px; line-height: 28px; text-align: center;}
        .active{ background-color: #eee;}
    </style>
</head>
<body>
    <div class="left">
        <div class="active">张三</div>
        <div>李四</div>
        <div>王五</div>
        <div>赵六</div>
        <div>孙七</div>
        <div>王八</div>
    </div>
    <div class="middle">
        <input type="button" value=">" class="btl" />
        <input type="button" value="<" class="btr"/>
    </div>
    <div class="right">

    </div>
</body>

<script>
var lefts = document.querySelectorAll('.left>div');
var rigths = document.querySelectorAll('.right>div');
var btl = document.querySelector('.btl')
var btr = document.querySelector('.btr')

/* document.querySelector('.btl').onclick = function(){
    var pDom = document.createElement('p');
    pDom.innerHTML = '后期追加';
    // 在table标签中 如果需要替换 tr标签， 一定要使用tbody的dom对象调用
    document.querySelector('#app').replaceChild(pDom,document.querySelector('#app>div'))
} */
console.log(lefts)
for (var i = 0; i < lefts.length; i++) {
      // 1-1. 给每一个 按钮添加一个 "编号"
      //      以自定义属性的形式记录在按钮身上
      lefts[i].dataset.index = i

      // 1-2. 给每一个 按钮添加一个 点击事件
      lefts[i].onclick = handler
    }

    // 2. 事件处理函数
    function handler() {
      // 2-1. 拿到当前点击的这个 li 的 "编号"
      //      也就是身上记录的 data-index 自定义属性的值
      var index = this.dataset.index - 0

      // 2-2. 清楚 btns 和 boxs 内的每个的 类名
      //      因为 btns.length 和 boxs.length 一样, 所以放在一个循环内
      for (var j = 0; j < lefts.length; j++) {
        lefts[j].className = ''
        
      }

      // 2-3. 给 "编号" 配套的 按钮 和 盒子 添加类名
      lefts[index].classList.add('active')
   
    }

btl.onclick=function(){
    var se=document.querySelector(".active");
console.log(se)
   
    // 在table标签中 如果需要替换 tr标签， 一定要使用tbody的dom对象调用
    var ss= document.querySelector('.right')
var dd =document.querySelector('.left')
ss.appendChild(se)


}
btr.onclick=function(){
    var se=document.querySelector(".active");
console.log(se)
   
    // 在table标签中 如果需要替换 tr标签， 一定要使用tbody的dom对象调用
    var dd= document.querySelector('.left')
var ss =document.querySelector('.right')
dd.appendChild(se)


}
</script>





</html>




